<template>
  <div class="building-list" style="display: flex; flex-direction: column; height: 100%">
    <div style="flex: none">
      <p class="block-title">楼栋单元</p>
      <p>共：{{ count.building || 0 }}个楼栋{{ count.unit || 0 }}个单元</p>
    </div>
    <div
      v-if="dataList && dataList.length"
      class="list-wrapper"
      style="flex: auto; height: auto; min-height: 0; overflow: hidden auto"
    >
      <div
        v-for="(item, index) in dataList"
        :key="item.id || index"
        class="list-item"
        :class="{ active: activeBuilding === item.id }"
      >
        <div class="item-name" @click="buildingClick(item)">
          {{ item.text }}
        </div>
        <div v-if="detailsVisible" class="item-detail" @click="details(item)">详情</div>
      </div>
    </div>
    <empty v-else />
  </div>
</template>

<script>
import Empty from '@gis/lib/components/Empty/index.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import { getTotal } from '@gis/lib/utils/index.js';
import { dialog } from '@gis/lib/components/antd-dialog';
import { realityHouseUnitByYard } from '@gis/lib/api';
import find from 'lodash-es/find.js';

export default {
  name: 'building-list',
  components: { Empty },
  mixins: [areaCodeMixin],
  props: {
    api: { type: Function, default: undefined },
    modelValue: { type: String, default: undefined },
    yardId: { type: String, default: undefined },
    detailsVisible: { type: Boolean, default: true },
  },
  data() {
    return {
      count: {},
      dataList: [],
      activeBuilding: null,
    };
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(id) {
        this.activeBuilding = id;
      },
    },
    yardId: {
      immediate: true,
      handler(yardId) {
        if (yardId) this.getDataListAsync();
      },
    },
  },
  methods: {
    details(data = {}) {
      dialog({
        content: () => import('../../house-list/components/building-details/index.vue'),
        contentProps: { data },
        dialogProps: {
          title: '楼栋详情',
          width: 'large',
          height: 'fixed',
          footer: null,
          bodyStyle: { padding: 0 },
        },
      });
    },
    async getDataListAsync() {
      if (!this.yardId) return;
      const api = typeof this.api === 'function' ? this.api : this.getBuildings;
      this.dataList = (await api(this.apiParams)) || [];
      const data = find(this.dataList, (item) => item.id === this.activeBuilding);
      this.buildingClick(data || this.dataList[0]);
      this.count = {
        building: this.dataList.length,
        unit: getTotal(this.dataList, (item) => {
          return item.nodes ? item.nodes.length : 0;
        }),
      };
    },
    buildingClick(data = {}) {
      this.activeBuilding = data.id;
      this.$emit('update:modelValue', this.activeBuilding);
      this.$emit('updateUnitList', data.nodes || []);
    },
    async getBuildings(params) {
      const res = await realityHouseUnitByYard(this.yardId);
      return res ? res.data || [] : [];
    },
  },
};
</script>

<style scoped lang="less">
.building-list {
  height: 100%;
  padding: 10px 20px 0;
  .list-wrapper {
    margin: 0 -20px;
    padding: 0 20px;
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;

      &.active {
        background: url('../../house-list/assets/menu_pic_check_t.png') center center no-repeat;
        background-size: 100% 100%;
      }

      .item-name {
        flex: auto;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
      }

      .item-detail {
        flex: none;
        width: 3em;
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        color: #6cccc3;
        cursor: pointer;
      }
    }
  }
}
</style>
